<template>
	<view class="addcreation bg">

		<scroll-view :scroll-with-animation="true" :scroll-into-view="scrollIntoView" scroll-y="true" class="msg-list" :enable-flex="true">

			<view class="a_head">
				<view class="h_title">图生图</view>
				<view class="h_text">根据您提供的图片按照需求生成新的图片</view>
			</view>

			<view class="a_form">
				
				
				<view class="">

					<view class="add_reference" >
						<view class="i_title">
							参考图
						</view>
						<view class="reference" @click="onChooseImage">
							<view class="flex-ct flex-column" v-if="!queryDatas.InputUrl">
								<image class="r_icon" :src="weburl" mode=""></image>
								<view class="r_text">
									点击上传图片（jpg、png）
								</view>
							</view>
							<image v-else class="imgs" :src="queryDatas.InputUrl" mode="heightFix"></image>
							<image class="t_icon" @click.stop="queryDatas.InputUrl=''" :src="weburl" mode=""></image>
				
						</view>
					</view>
					<view class="add_textarea">
						<view class="i_title">
							修改需求
						</view>
						<view class="textarea">
							<image class="t_icon" @click="queryData[index].value=''" :src="weburl" mode=""></image>
							<textarea :maxlength='-1' @input="btnchange" v-model="aa" class="i_input" placeholder-class="placeholder_i_input" value="" placeholder="" />
						</view>
					</view>
				
				</view>
				
				


				<!-- 画幅 -->
				<view class="add_picture" v-if="detailData.ccswitch==1">
					<view class="i_title">
						画幅
					</view>
					<view class="picture">
						<view v-for="(item,index) in detailData.cclist_l" :key="index" class="p_td" :class="{'p_active':queryDatas.Resolution==item.detail_0}" @click="queryDatas.Resolution=item.detail_0">
							<view class="" :class="{'p_left1':item.detail_1=='1:1','p_left2':item.detail_1=='3:4','p_left3':item.detail_1=='4:3'}"></view>
							<view class="p_right">
								{{item.detail_1}}
							</view>
						</view>
					</view>
				</view>
				<view class="add_imgstyle" v-if="detailData.styleswitch==1">
					<view class="i_title">
						风格
					</view>
					<view class="imgstyle">
						<view class="p_td" @click="queryDatas.Styles=item.code" v-for="(item,index) in detailData.style_info_list" :key="index">
							<image class="t_icon" :class="{'p_active':queryDatas.Styles==item.code}" :src="item.image" mode=""></image>
							<view class="p_text">
								{{item.name}}
							</view>
						</view>

					</view>
				</view>

				<view class="btn_bottom " @click="cikout" :class="{'op5':!btnShow,'op5':statusOut==2}">
					{{statusOut==1?'生成':statusOut==2?'生成中':'生成失败请重新生成'}}
				</view>
			</view>

			<view class="a_result">
				<view class="" style="    font-weight: 600;">
					生成作品：
				</view>
				<view class="a_img" v-if="endimgbase64">
					<image @click="onimg" :src="endimgbase64" mode="widthFix"></image>
				</view>
				<view class="a_btn" v-if="endimgbase64">
					<!-- open-type="share" -->
					<button class="a_btn1" @click="cikshare">
						分享
					</button>
					<view class="a_btn2" @click="cikbaoc">
						保存
					</view>
				</view>
				<view>


				</view>
			</view>
			<view id="last-msg-item"></view>
		</scroll-view>

	</view>
</template>

<script>
	// import { connectio, sendMessage, disconnect } from "@/http/websocket.js";
	export default {
		data() {
			return {
				weburl: "https://dummyimage.com/74x74/346aff/ffffff",
				endimgbase64: '',
				statusOut: 1, //1=正常生成字 2=生成中 3=生成失败
				scrollIntoView: "",
				styletab: 1,
				index: "",
				// 通讯请求状态
				requestState: 1, //0发送中 100发送成功 -100发送失败
				btnShow: false,
				clearTime: null,
				id: '',
				detailData: {
					name: '',
					introduction: '',
					json: [] //id //1 文本  2 多行文本  3选择 4描述词 5画幅 6参考图
				},
				result: '',
				queryDatas: {
					InputUrl: "",
					Resolution: "", //分辨率
					Styles: "", //风格
				},
				queryData: [],
				globalData: getApp().globalData, //手机距离参数
				list: [{ name: "修改密码" }],
				userinfo: {}
			}
		},
		onLoad(e) {
			const res = {
				"id": 2,
				"classify_id": 1,
				"name": "自由绘画（图生图）",
				"nextname": "根据您提供的图片按照需求生成新的图片",
				"logoimage": null,
				"type": "2",
				"target": "",
				"json": [{ "start": "参考图", "title": "参考图", "id": "4", "state": "1", "example": "", "choose": "", "image": "", "end": "" }, { "start": "描述", "title": "修改需求", "id": "2", "state": "1", "example": "", "choose": "", "image": "", "end": "" }],
				"styleswitch": 1,
				"defaultstyle_id": 9,
				"style_list_ids": "22,13,7,11,10,9",
				"ccswitch": 1,
				"defaultcc": "768:768_1:1",
				"cclist": "768:768_1:1|768:1024_3:4|1024:768_4:3",
				"seenum": 0,
				"createtime": 1695372204,
				"updatetime": 1695381153,
				"deletetime": null,
				"defaultstyle_id2": 30,
				"style_list_ids2": "27,30,26,28,29",
				"introduction": "根据您提供的图片按照需求生成新的图片",
				"defaultcc_detail_0": "768:768",
				"defaultcc_detail_1": "1:1",
				"cclist_l": [{ "detail_0": "768:768", "detail_1": "1:1" }, { "detail_0": "768:1024", "detail_1": "3:4" },
					{ "detail_0": "1024:768", "detail_1": "4:3" }
				],
				"defaultstyle_info": { "id": 30, "code": "203", "description_example": "", "image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png", "createtime": 1695376134, "updatetime": 1695376134, "deletetime": null, "name": "唯美古风", "weigh": 30, "switch": 0 },
				"style_info_list": [{ "id": 26, "code": "106", "description_example": "", "image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png", "createtime": 1695376086, "updatetime": 1695376086, "deletetime": null, "name": "水彩画", "weigh": 26, "switch": 0 }, { "id": 27, "code": "110", "description_example": "", "image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png", "createtime": 1695376100, "updatetime": 1695376100, "deletetime": null, "name": "2.5D", "weigh": 27, "switch": 0 }, { "id": 28, "code": "201", "description_example": "", "image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png", "createtime": 1695376111, "updatetime": 1695376111, "deletetime": null, "name": "日系动漫", "weigh": 28, "switch": 0 },
					{ "id": 29, "code": "202", "description_example": "", "image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png", "createtime": 1695376120, "updatetime": 1695376120, "deletetime": null, "name": "美系动漫", "weigh": 29, "switch": 0 }, { "id": 30, "code": "203", "description_example": "", "image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png", "createtime": 1695376134, "updatetime": 1695376134, "deletetime": null, "name": "唯美古风", "weigh": 30, "switch": 0 }
				],
				"type_text": "Type 2"
			}
			this.detailData = res
			this.queryData = res.json.map(item => {
				return {
					value: item.end,
					...item
				}

			})
			this.queryDatas.Resolution = res.defaultcc_detail_0
			this.queryDatas.Styles = res.defaultstyle_info && res.defaultstyle_info.code || ''
			this.btnchange()

		},
		onShow() {},
		onHide() {},
		destroyed() {},
		onShareTimeline() {
			// console.log("分享朋友圈", this.userinfo.code)
			// return {
			// 	query: `code=${this.userinfo.code||''}&id=${this.detailData.id}`
			// }
		},
		onShareAppMessage() {
			// return {
			// 	path: `/info/adddraw/adddraw?code=${this.userinfo.code||''}&id=${this.detailData.id}`,
			// }
		},
		methods: {
			cikshare() {
				if (this.endimgbase64) {
					this.$auth.navigateTo("/info/appshare/appshare", { base64: this.endimgbase64, code: this.userinfo.code, id: this.detailData.id })
				}
			},
			onimg() {
				uni.previewImage({
					urls: [this.endimgbase64],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					},
				})
			},
			//base64转本地图片，将数据存储在本地
			base64ToSave(base64data, FILE_BASE_NAME = 'tmp_base64src') {
				const fsm = uni.getFileSystemManager();
				return new Promise((resolve, reject) => {
					//format这个跟base64数据的开头对应
					const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
					if (!format) {
						reject(new Error('ERROR_BASE64SRC_PARSE'));
					}
					const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
					const buffer = wx.base64ToArrayBuffer(bodyData);
					fsm.writeFile({
						filePath,
						data: buffer,
						encoding: 'binary',
						success() {
							resolve(filePath);
						},
						fail() {
							reject(new Error('ERROR_BASE64SRC_WRITE'));
						},
					});
				});
			},
			//分享
			cikfenx() {

			},
			//保存
			cikbaoc() {
				this.base64ToSave(this.endimgbase64).then(res => {
					console.log(res)
					uni.saveImageToPhotosAlbum({
						filePath: res,
						success: () => {
							console.log('save success');
							this.$auth.showToast("保存成功")
						}
					});
				})
			},
			//上传图片
			onChooseImage(e) {
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					success: res => {
						uni.uploadFile({
							url: this.$http.commonUpload(),
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								// 上传成功，获取服务器返回的头像路径
								const data = JSON.parse(res.data);
								console.log(JSON.parse(res.data))
								this.queryDatas.InputUrl = data.data.fullurl
							},
							fail: (err) => {
								// 上传失败，处理错误逻辑
								console.error(err);
							}
						});
					}
				});
			},
			// 滚动窗口以显示最新的一条消息
			showLastMsg() {
				// 等待DOM更新
				this.$nextTick(() => {
					// 将scrollIntoView属性设置为"last-msg-item"，以便滚动窗口到最后一条消息
					this.scrollIntoView = "last-msg-item"
					// 等待DOM更新，即：滚动完成
					this.$nextTick(() => {
						// 将scrollIntoView属性设置为空，以便下次设置滚动条位置可被监听
						this.scrollIntoView = ""
					})
				})
			},
			//多选框
			bindPickerChange(e, index) {
				this.queryData[index].value = this.queryData[index].choose[e.detail.value]
				this.btnchange()
			},
			//循环遍历每一个参数未必填时携带的参数是否有值
			btnchange() {
				this.clearTime && clearTimeout(this.clearTime)
				this.clearTime = setTimeout(() => {
					let isok = false
					this.queryData.forEach(item => {
						if (item.value != '') {
							isok = true
						}
					})
					this.btnShow = isok
				}, 500);
			},
			//登录弹框打开
			logininfoopen() {
				this.$refs.refSendVipPopup.open({
					cancelText: "暂不需要",
					confirmText: "登录领取",
					success: () => {
						this.$refs.refvipTipPopup.open({
							success: () => {},
							fail: () => {},
							complete: () => {},
						})
					},
					fail: () => {},
					complete: () => {},
				})
			},
			//能量不足弹框
			vipopen() {
				this.$refs.refShortagePopup.open({
					content: "灵悟AI需要能量维持其输出内容，当前能量不足，您可以通过签到、分享好友、购买会员等途径获取能量！",
					cancelText: "购买会员",
					confirmText: "免费领会员",
					success: () => {
						this.$auth.navigateTo("/info/member/member")
					},
					fail: () => {
						//跳转会员
						this.onVipMsgclick()
					},
					complete: () => {
						console.log("通用")
					},
				})
			},
			onVipMsgclick() {
				if (!getApp().globalData.permission) {
					return this.logininfoopen()
				}

				this.$refs.refvipPopup.open({
					cancelText: "直接购买",
					confirmText: "分享好友",
					success: () => {
						console.log("对的")
					},
					fail: () => {
						//跳转会员
						this.$auth.navigateTo("/info/member/member")
					},
					complete: () => {
						console.log("通用")
					},
				})
			},
			//socketio 消息返回
			newMsgIo(e) {
				if (this.$auth.isJSON(e)) {
					const res = JSON.parse(e)
					console.log('接受消息', res);
					if (res.code === 1) {
						this.requestState = 0
						this.result += res.msg
					} else if (res.code === 2) {
						this.requestState = 100
					} else if (res.code === 0) {
						this.requestState = -100
						this.result = ''
						if (!getApp().globalData.permission) {
							this.logininfoopen()
						} else {
							this.vipopen()

						}
					} else if (res.code === 401) {
						this.requestState = -100
						this.$auth.showToast('登录已过期，已自动登录')
						disconnect && disconnect()
						setTimeout(() => {
							connectio(this); //开启websocket
						}, 1000);
						// this.$auth.showToast('登录已过期，请退出并重新登录')
					}
				}
			},
			//获取创作详情
			getAssdetail() {
				this.$http.tstassdetailApi({ id: this.id }).then(res => {
					this.detailData = res.data
					this.queryData = res.data.json.map(item => {
						return {
							value: item.end,
							...item
						}

					})
					this.queryDatas.Resolution = res.data.defaultcc_detail_0
					this.queryDatas.Styles = res.data.defaultstyle_info && res.data.defaultstyle_info.code || ''
					this.btnchange()
				})
			},
			//返回上一页面
			toback() {
				this.$auth.navigateBack()
			},
			cikout() {

				if (this.statusOut == 2) return this.$auth.showToast("正在生成中，请稍后")
				if (!this.btnShow) return this.$auth.showToast("请填写必填信息")
				this.result = ''
				this.statusOut = 2
				let text1 = []
				let text2 = []
				this.queryData && this.queryData.forEach(item => {
					if (item.id != 4) {
						text1.push(item.start + ':[' + item.value + ']')
					}
				})
				const text = text1.join(',') + '$$'
				if (this.detailData.type == 1) { //文生图
					this.$http.tstwstApi({
						id: this.detailData.id,
						Prompt: text,
						Styles: this.queryDatas.Styles,
						Resolution: this.queryDatas.Resolution,
					}).then(res => {
						this.statusOut = 1
						console.log("文生图", res)
						if (res.data.ResultImage) {
							this.endimgbase64 = 'data:image/png;base64,' + res.data.ResultImage
						} else {
							this.endimgbase64 = ''
						}
						this.showLastMsg()
					}).catch(err => {
						this.statusOut = 3
						if (err.code == 0) {
							this.$auth.showToast(res.msg)
						}
						if (err.code == 3) {
							if (!getApp().globalData.permission) {
								this.logininfoopen()
							} else {
								this.vipopen()
							}
						}
					})
				} else if (this.detailData.type == 2) { //图生图
					this.$http.tsttstApi({
						id: this.detailData.id,
						InputUrl: this.queryDatas.InputUrl,
						Prompt: text,
						Styles: this.queryDatas.Styles,
						Resolution: this.queryDatas.Resolution,
					}).then(res => {
						this.statusOut = 1
						console.log("图生图", res)
						if (res.data.ResultImage) {
							this.endimgbase64 = 'data:image/png;base64,' + res.data.ResultImage
						} else {
							this.endimgbase64 = ''
						}
						this.showLastMsg()
					}).catch(() => {
						this.statusOut = 3
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.msg-list {
		flex: 1;
		height: 0;
	}
	.addcreation {
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		//头部
		.c_title {
			position: relative;
			font-weight: 400;
			color: rgba(95, 95, 107, 1);
			display: flex;
			align-items: center;
			.navbar {
				z-index: 2;
				box-sizing: border-box;
				padding: 0 60rpx 0 36rpx;
				align-items: center;
				display: flex;
				justify-content: space-between;
				width: 100%;
			}
			.left {
				width: 18rpx;
				height: 30rpx;
			}
			.title {
				font-weight: bold;
				color: rgba(48, 48, 64, 1);
				font-size: 36rpx;
				text-align: center;
				position: absolute;
				width: 100%;
			}
		}
		.a_head {
			padding: 26rpx 40rpx 26rpx 36rpx;
			box-sizing: border-box;
			width: 690rpx;
			min-height: 140rpx;
			margin: auto;
			margin-top: 20rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, 0.06);
			letter-spacing: 0rpx;
			.h_title {
				font-size: 30rpx;
				font-weight: 700;
				line-height: 42rpx;
				color: rgba(56, 56, 56, 1);
			}
			.h_text {
				margin-top: 10rpx;
				font-size: 26rpx;
				line-height: 36.4rpx;
				color: rgba(95, 95, 107, 1);
			}
		}
		.a_form {
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin: auto;
			margin-top: 22rpx;
			width: 690rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, 0.06);
			letter-spacing: 0rpx;
			.add_input {
				border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				.i_input {
					height: 66rpx;
					line-height: 66rpx;
					color: rgba(67, 67, 84, 1);
				}
				.placeholder_i_input {
					color: rgba(163, 167, 179, 1);
				}
			}
			.add_textarea {
				// border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				.textarea {
					position: relative;
					width: 630rpx;
					height: 260rpx;
					box-sizing: border-box;
					opacity: 1;
					border-radius: 10rpx;
					background: rgba(245, 245, 249, 1);
					padding: 24rpx 24rpx 44rpx 24rpx;
					.i_input {
						height: 100%;
						color: rgba(67, 67, 84, 1);
					}
					.t_icon {
						right: 21rpx;
						bottom: 11rpx;
						position: absolute;
						width: 28rpx;
						height: 26.53rpx;
					}
					.placeholder_i_input {
						color: rgba(163, 167, 179, 1);
					}
				}
			}
			.add_reference {
				// border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				.reference {
					width: 630rpx;
					height: 260rpx;
					opacity: 1;
					border-radius: 10rpx;
					background: rgba(245, 245, 249, 1);
					border: 2rpx dashed rgba(130, 133, 170, 1);
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.imgs {
						margin: 10rpx 0;
						// min-height: 260rpx;
						max-width: 630rpx;
						width: 100%;
						height: 100%;
					}
					.r_icon {
						width: 60rpx;
						height: 60rpx;
					}
					.r_text {
						margin-top: 23rpx;
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 39.2rpx;
						color: rgba(163, 167, 179, 1);
						text-align: left;
						vertical-align: top;
					}
					.t_icon {
						right: 21rpx;
						bottom: 11rpx;
						position: absolute;
						width: 28rpx;
						height: 26.53rpx;
					}
					.placeholder_i_input {
						color: rgba(163, 167, 179, 1);
					}
				}
			}
			//画幅
			.add_picture {
				// border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				//画幅
				.picture {
					margin-top: 10rpx;
					position: relative;
					width: 630rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.p_td {
						border: 2rpx solid #fff;
						width: 192rpx;
						height: 80rpx;
						border-radius: 10rpx;
						background: rgba(245, 245, 249, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						.p_left1 {
							width: 36rpx;
							height: 36rpx;
							opacity: 1;
							background: rgba(179, 199, 255, 1);
						}
						.p_left2 {
							width: 32rpx;
							height: 48rpx;
							opacity: 1;
							background: rgba(179, 199, 255, 1);
						}
						.p_left3 {
							width: 48rpx;
							height: 32rpx;
							opacity: 1;
							background: rgba(179, 199, 255, 1);
						}
						.p_right {
							margin-left: 20rpx;
							font-size: 28rpx;
							font-weight: 500;
							letter-spacing: 0rpx;
							line-height: 39.2rpx;
							color: rgba(67, 67, 84, 1);
							text-align: left;
							vertical-align: top;
						}
					}
					.p_active {
						border: 2rpx solid rgba(52, 106, 255, 1);
						background: rgba(227, 234, 255, 1);
					}
				}
			}
			//图片风格
			.add_imgstyle {
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				//图片风格
				.imgstyle {
					margin-top: 10rpx;
					position: relative;
					width: 630rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					overflow-x: scroll;
					.p_td {
						border: 2rpx solid #fff;
						width: 160rpx;
						text-align: center;
						.t_icon {
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
							border: 2rpx solid #fff;
						}
						.p_active {
							position: relative;
							border: 2rpx solid rgba(52, 106, 255, 1);
						}
						.p_active::after {
							content: "";
							position: absolute;
							bottom: 12rpx;
							right: 12rpx;
							width: 28rpx;
							height: 28rpx;
							background-size: contain;
							background-image: url("");
						}
						.p_text {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-top: 10rpx;
							font-size: 24rpx;
							font-weight: 500;
							letter-spacing: 0rpx;
							line-height: 33.6rpx;
							color: rgba(95, 95, 107, 1);
							text-align: center;
							vertical-align: top;
						}
					}
					.p_td+.p_td {
						margin-left: 38rpx;
						flex-shrink: 0;
					}
				}
			}
			.add_select {
				position: relative;
				letter-spacing: 0rpx;
				border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				margin-top: 27rpx;
				height: 66rpx;
				line-height: 66rpx;
				border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				justify-content: space-between;
				align-items: center;
				.a_xicon {
					width: 12rpx;
					height: 36rpx;
					position: absolute;
					left: -12rpx;
				}
				.s_left {
					line-height: 39.2rpx;
					color: rgba(67, 67, 84, 1);
				}
				.s_right {
					display: flex;
					align-items: center;
					.s_text {
						line-height: 39.2rpx;
						color: rgba(163, 167, 179, 1);
					}
					.s_text2 {
						letter-spacing: 0rpx;
						line-height: 39.2rpx;
						color: rgba(67, 67, 84, 1);
					}
					.s_icon {
						margin-left: 10rpx;
						height: 19.3rpx;
						width: 10.6rpx;
					}
				}
			}
			.btn_bottom {
				margin: 37rpx auto 40rpx auto;
				width: 630rpx;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 16rpx;
				background: rgba(52, 106, 255, 1);
				font-size: 30rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}
		.a_result {
			box-sizing: border-box;
			margin: auto;
			padding: 36rpx;
			min-height: 400rpx;
			margin-top: 24rpx;
			width: 690rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, 0.06);
			.a_img {
				margin-top: 30rpx;
				text-align: center;
				image {
					width: 620rpx;
					height: 750rpx;
				}
			}
			.a_btn:after {
				border: none;
			}
			.a_btn {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.a_btn1 {
					margin: 0;
					padding: 0;
					border: 0;
					border-radius: 0;
					width: 200rpx;
					height: 64rpx;
					line-height: 64rpx;
					opacity: 1;
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					border: 2rpx solid rgba(52, 106, 255, 1);
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					color: rgba(52, 106, 255, 1);
					text-align: center;
					vertical-align: middle;
				}
				.a_btn2 {
					margin-left: 26rpx;
					width: 200rpx;
					height: 64rpx;
					line-height: 64rpx;
					opacity: 1;
					border-radius: 10rpx;
					background: rgba(52, 106, 255, 1);
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					vertical-align: top;
				}
			}
		}
		.s_content {
			margin: 36rpx 30rpx 0 30rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			padding: 26rpx 32rpx 26rpx 32rpx;
			.s_tr+.s_tr {
				border-top: 1rpx solid rgba(242, 242, 242, 1);
			}
			.s_tr {
				height: 120rpx;
				line-height: 120rpx;
				justify-content: space-between;
				display: flex;
				align-items: center;
				.c_left {
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 39.2rpx;
					color: rgba(67, 67, 84, 1);
				}
				.c_right {
					.icon {
						height: 19.3rpx;
						width: 10.6rpx;
					}
				}
			}
		}
	}
</style>